<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="queryParams">
      <el-form-item label="日志内容">
        <el-input v-model="query.logContent" placeholder="日志内容"></el-input>
      </el-form-item>
      <el-form-item label="IP">
        <el-input v-model="query.ip" placeholder="IP"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作区域 -->
    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="title" label="资源名称"> </el-table-column>
      <el-table-column label="图标">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="sortNo" label="排序"> </el-table-column>
      <el-table-column prop="resources" label="权限标识"> </el-table-column>
      <el-table-column prop="url" label="资源路径"> </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          <el-tag size="small">学校</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="flag" label="状态">
        <template slot-scope="scope">
          <el-tag size="small">学校</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-plus"
            @click="saveChildren(scope.row)"
            >添加</el-button
          >
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加或求改弹窗 -->
    <el-dialog :title="title" :visible.sync="addorUpdateFlag" width="40%">
      <el-form :model="detailModel" label-width="80px">
        <el-form-item label="上级资源">
          <el-input
            v-model="detailModel.parentId"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="资源类型">
          <el-radio v-model="detailModel.type" label="1">菜单</el-radio>
          <el-radio v-model="detailModel.type" label="2">按钮</el-radio>
          <el-radio v-model="detailModel.type" label="3">外部链接</el-radio>
        </el-form-item>
        <el-form-item label="资源名称">
          <el-input v-model="detailModel.title" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="路由地址">
          <el-input v-model="detailModel.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="资源图标">
          <e-icon-picker v-model="detailModel.icon"></e-icon-picker>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="detailModel.sortNo"
            :min="1"
            :max="10"
            label="描述文字"
            width="100%"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveOrUpdate">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { menu } from '../../api/menu'
export default {
  data() {
    return {
      tableData: [],
      query: {},
      queryParams: {},
      icon: '',
      addorUpdateFlag: false,
      title: '',
      detailModel: {
        title: '',
        icon: '',
        sortNo: 1,
        resources: '',
        url: '',
        type: '1',
        parentId: '#'
      },
      // 父级资源
      parentModel: {}
    }
  },
  methods: {
    handleAdd() {
      this.addorUpdateFlag = true
      this.title = '新增'
    },
    selectRow(val) {
      console.log(val)
      this.parentModel = val
    },
    // 添加或更新
    saveOrUpdate() {
      menu.addMenu(this.detailModel).then((res) => {
        if (res.code === 200) {
          this.$message.success('添加成功')
          this.queryMenuTree()
          // 关闭弹窗
          this.addorUpdateFlag = false
          this.detailModel = {}
        }
      })
    },
    // 子菜单添加
    saveChildren(row) {
      this.addorUpdateFlag = true
      this.detailModel.parentId = row.id
    },
    // 分页查询
    queryPage() {
      menu.queryPage(this.queryParams).then((res) => {
        this.tableData = res.list
      })
    },
    // 查询菜单tree
    queryMenuTree() {
      menu.queryMenuTree(this.queryParams).then((res) => {
        this.tableData = res.data
      })
    },
    // 删除
    handleDelete(row) {
      menu.deleteMenu(row.id).then((res) => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          // 重新加载数据
          this.queryPage()
        }
      })
    }
  },
  created() {
    this.queryMenuTree()
  }
}
</script>
